<template>
  <div>
    <Table stripe :columns="columns1" :data="data1" @on-row-click="selechange"></Table>
    <Modal :title= "modalTitle" v-model="modal10" fullscreen >
      <Table stripe :columns="columns2" :data="data2"></Table>
    </Modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      modal10: false,
      modalTitle: 'title',
      columns1: [
        {
          title:"图片",
          key: 'pic_s210',
          render: (h, params) => {
            return h("img", {
              /*  组件样式 */
              style: {
                width: "100px",
                height: "80px",
                "border-radius": "5%"
              },
              /*  html属性 */
              attrs: {
                /*  图片的路径,直接采用后台返回的键值 */
                src: params.row.pic_s210,
                
              }
            });
          }
        },
        {
          title: "名称",
          key: "name",
        },
        {
          title: "描述",
          key: "comment",
        },
        {
          title: "歌曲数",
          key: "count",
        },
      ],
      data1: [],
      data2:[],
      columns2: [
        {
          title:"图片",
          key: 'pic_big',
          render: (h, params) => {
            return h("img", {
              /*  组件样式 */
              style: {
                width: "100px",
                height: "80px",
                "border-radius": "5%"
              },
              /*  html属性 */
              attrs: {
                /*  图片的路径,直接采用后台返回的键值 */
                src: params.row.pic_big,
                
              }
            });
          }
        },
        {
          title: "名称",
          key: "album_title",
        },
        {
          title: "演唱者",
          key: "author",
        }
      ],
    };
  },
  created() {
    this.$axios.get("https://api.apiopen.top/musicRankings").then((returnD) => {
      console.log(returnD);
      this.data1 = returnD.data.result;
    });
  },
  methods: {
    selechange(selection) {
      console.log(selection)
      this.modalTitle = selection.name;
      this.modal10 = true;
      this.data2 = selection.content;
    },
  },
};
</script>
<style  lang="less">
.ivu-modal {
  top: 0;
}
</style>